<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2022 APThink David唐 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<script lang="ts">
import {
  cache,
  CommonTree,
  toBoolean,
  hasPermission,
  confirm,
  copyObject,
} from "@/utils";
import { getDepartment, add, upd, del } from "@/api";
import { DepartmentType, ScheduleType } from "@/contants";
import { Department } from "./Department";
import { SysDataSelect } from "@/components";
// import log from "loglevel";

export default {
  name: "Department",
  components: {
    SysDataSelect,
    // ColumnOperator,
    // RowOperator,
  },
  data() {
    return {
      fields: [],
      allFields: [],
      department: null,
      enableCode: true,
      current: new Department(),
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeOptions: [],
      expandKeys: [],
      parentOptions: [],
      filterText: null,
      departments: new CommonTree(),
      basicRules: {
        name: {
          required: true,
          message: this.$t("validate.required", {
            field: this.$t("label.name"),
          }),
          trigger: "blur",
        },
        seq: {
          required: true,
          message: this.$t("validate.required", {
            field: this.$t("label.seq"),
          }),
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    canInputLine() {
      return this.current.departmenttype == DepartmentType.DO;
    },
    canAdd() {
      return hasPermission("department:add");
    },
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    },
  },
  mounted() {
    cache.getTable("department").then((d) => {
      this.department = d;
      this.treeOptions = this.department.nodeOptions;
      this.parentOptions = this.department.nodeOptions;
    });
    cache.getSysParams().then((d) => {
      this.enableCode = toBoolean(d.get("EnableDepartmentCode"));
    });
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.includes(value);
    },
    onAddClick() {
      this.current = new Department();
      this.parentOptions = this.department.nodeOptions;
    },
    onTreeClick(node) {
      let d = this.departments.get(node.value);
      this.current = new Department();
      if (d) {
        this.parentOptions = this.department.nodeExcludeMeOptions(d.uid);
        copyObject(d, this.current);
      } else {
        getDepartment(node.value).then((d) => {
          this.parentOptions = this.department.nodeExcludeMeOptions(d.uid);
          copyObject(d, this.current);
          this.departments.add(d);
        });
      }
    },
    onConfirmClick() {
      if (this.current.uid == undefined) {
        add("department", this.current).then((d) => {
          this.department.add(d);
          this.departments.add(d);
          this.current.uid = d.uid; //David: 用于显示删除
          this.treeOptions = this.department.nodeOptions;
          this.expandKeys = [d.uid];
        });
      } else {
        upd("department", this.current).then((d) => {
          this.department.add(d);
          this.departments.add(d);
          this.treeOptions = this.department.nodeOptions;
          this.expandKeys = [d.uid];
        });
      }
    },
    onDeleteClick() {
      confirm(
        this.$t("message.deletedata") + " [ " + this.current.name + " ]"
      ).then(() => {
        del("department", this.current.uid).then(() => {
          //David: 删除后缺省进入新增状态
          this.departments.delete(this.current.uid);
          this.department.delete(this.current.uid);
          this.parentOptions = this.department.nodeOptions;
          this.treeOptions = this.department.nodeOptions;
          if (this.current.parentuid) {
            this.expandKeys = [this.current.parentuid]; //David: 定位到父类
          }
          this.current = new Department();
        });
      });
    },
    onSelectScheduleType(node) {
      if (node.id == ScheduleType.NO) {
        this.current.efficiency = undefined;
      }
    },
    onSelectDepartmentType(node) {
      if (node.id == DepartmentType.NO) {
        this.current.efficiency = undefined;
        this.current.scheduletype = undefined;
      }
    },
  },
};
</script>

<template>
  <el-row :gutter="12">
    <el-col :xs="24" :md="8">
      <el-row :gutter="12">
        <el-col :span="20"
          ><el-input v-model="filterText" :placeholder="$t('button.filter')"
        /></el-col>
        <el-col :span="4">
          <el-tooltip
            v-if="canAdd"
            :content="$t('button.addTip')"
            placement="top"
          >
            <el-button type="primary" @click="onAddClick" icon="Plus" />
          </el-tooltip>
        </el-col>
      </el-row>

      <el-tree
        ref="treeRef"
        class="filter-tree"
        node-key="value"
        :data="treeOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :default-expanded-keys="expandKeys"
        @node-click="onTreeClick"
      />
    </el-col>
    <el-col :xs="24" :md="16">
      <el-form :model="current" label-width="150px" label-position="right" :rules="basicRules">
        <el-form-item v-if="enableCode" :label="$t('label.code')">
          <el-input v-model="current.code" />
        </el-form-item>
        <el-form-item :label="$t('label.name')" prop="name">
          <el-input v-model="current.name" />
        </el-form-item>
        <el-form-item :label="$t('label.parent')">
          <el-tree-select
            v-model="current.parentuid"
            :check-strictly="true"
            :render-after-expand="false"
            :props="defaultProps"
            :data="parentOptions"
            :placeholder="$t('label.parentTip')"
            style="width: 100%"
            clearable
          />
        </el-form-item>
        <sys-data-select
          v-model="current.departmenttype"
          category="departmenttype"
        ></sys-data-select>
        <sys-data-select
          v-if="canInputLine"
          v-model="current.scheduletype"
          category="scheduletype"
        ></sys-data-select>
        <el-form-item v-if="canInputLine" :label="$t('label.efficiency')">
          <el-input v-model="current.efficiency" />
        </el-form-item>
        <el-form-item :label="$t('label.worker')">
          <el-input-number
            v-model="current.worker"
            :min="1"
            :max="10000"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item :label="$t('label.contactor')">
          <el-input v-model="current.contactor" />
        </el-form-item>
        <el-form-item :label="$t('label.phone')">
          <el-input v-model="current.phone" />
        </el-form-item>
        <el-form-item :label="$t('label.address')">
          <el-input v-model="current.address" type="textarea" />
        </el-form-item>
        <el-form-item :label="$t('label.description')">
          <el-input v-model="current.description" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onConfirmClick">{{
            $t("button.confirm")
          }}</el-button>
          <el-button
            v-if="current && current.uid"
            type="danger"
            @click="onDeleteClick"
            >{{ $t("button.delete") }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
